<template>
	<view class="container">
		<!-- 订单列表 -->
		<view class="item" v-for="item in orderList" :key="item.id">
			<navigator :url="setPath(item.type)">
				<view class="mes">
					<view class="pic">
						<image src="../../../static/zhang/doctor.png" mode="widthFix"></image>
					</view>
					<view class="service">
						<text>{{item.service}}</text>
						<text>{{"￥" + item.price}}</text>
					</view>

					<view id="status">{{item.status}}</view>
				</view>
			</navigator>

			<!-- 按钮 -->
			<view class="btnGroup">
				<navigator v-if="item.operatorL" :url="setBtnPath(item.operatorL,item.type)">
					<view class="btn">{{item.operatorL}}</view>
				</navigator>
				<navigator :url="setBtnPath(item.operatorR,item.type)">
					<view class="btn">{{item.operatorR}}</view>
				</navigator>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				btnPath: {
					nopage: "#",
					evaluate: "/pages/zhang/service/btnList/evaluate",
					cancel: "/pages/zhang/service/btnList/cancel",
					refund: "/pages/zhang/service/btnList/refund",
					refundProFail: "/pages/zhang/service/btnList/refundProFail",
					refundProSuc: "/pages/zhang/service/btnList/refundProSuc"
				},
				path: {
					unpaid: "/pages/zhang/service/list/unpaid",
					received: "/pages/zhang/service/list/received",
					inService: "/pages/zhang/service/list/inService",
					unevaluated: "/pages/zhang/service/list/unevaluated",
					canceled: "/pages/zhang/service/list/canceled",
					refunding: "/pages/zhang/service/list/refunding",
					refundFail: "/pages/zhang/service/list/refundFail",
					refundSuccess: "/pages/zhang/service/list/refundSuccess"
				},
				orderList: [{
						id: 1,
						service: "助医服务",
						status: "待付款",
						price: 38,
						operatorL: "取消订单",
						operatorR: "付款",
						type: "unpaid",
					}, {
						id: 2,
						service: "助医服务",
						status: "陪护员距您620M",
						price: 38,
						operatorL: "取消订单",
						operatorR: "联系陪护员",
						type: "received",
					}, {
						id: 3,
						service: "助医服务",
						status: "服务中",
						price: 38,
						operatorL: "取消订单",
						operatorR: "联系平台",
						type: "inService",
					}, {
						id: 4,
						service: "助医服务",
						status: "已完成",
						price: 38,
						operatorL: "再来一单",
						operatorR: "评价",
						type: "unevaluated",
					},
					{
						id: 5,
						service: "助医服务",
						status: "已取消",
						price: 38,
						operatorR: "退款进度",
						type: "canceled",
					}, {
						id: 6,
						service: "助医服务",
						status: "退款中",
						price: 38,
						operatorL: "再来一单",
						operatorR: "退款进度",
						type: "refunding",
					}, {
						id: 7,
						service: "助医服务",
						status: "退款成功",
						price: 38,
						operatorL: "再来一单",
						operatorR: "退款进度",
						type: "refundSuccess"
					}, {
						id: 8,
						service: "助医服务",
						status: "退款失败",
						price: 38,
						operatorL: "再来一单",
						operatorR: "退款进度",
						type: "refundFail"
					},
				],
			}
		},
		methods: {
			setBtnPath(btn, type) {
				let a = ""
				switch (btn) {
					case "取消订单":
						a = this.btnPath.cancel;
						break;
					case "退款":
						a = this.btnPath.refund;
						break;
					case "评价":
						a = this.btnPath.evaluate;
						break;
					case "退款进度":
						type == "refundSuccess" ? a = this.btnPath.refundProSuc : a = this.btnPath.refundProFail
						break;
					default:
						a = this.btnPath.nopage;
				}
				return a;
			},
			setPath(type) {
				let a = "";
				switch (type) {
					case "unpaid":
						a = this.path.unpaid;
						break;
					case "canceled":
						a = this.path.canceled;
						break;
					case "refunding":
						a = this.path.refunding;
						break;
					case "refundFail":
						a = this.path.refundFail;
					case "refundSuccess":
						a = this.path.refundSuccess;
					case "received":
						a = this.path.received;
						break;
					case "inService":
						a = this.path.inService;
						break;
					case "unevaluated":
						a = this.path.unevaluated;
						break;
					default:
						console.log("未指定服务类型")
				}
				return a;
			}
		},
	}
</script>

<style scoped>
	.container {
		display: flex;
		flex-flow: column nowrap;
		padding: 10rpx;
	}

	.item {
		box-shadow: 0 2rpx 1rpx 2rpx rgba(0, 0, 0, 0.1);
		margin-bottom: 20rpx;
		padding: 10rpx;
		box-sizing: border-box;
		border-radius: 10rpx;
	}

	.mes {
		display: flex;
		flex-flow: row nowrap;
		padding: 10rpx;
		border-bottom: 1px solid rgba(0, 0, 0, 0.1);
		margin-bottom: 10rpx;
	}

	.pic {
		width: 100rpx;
		height: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #007AFF;
		margin-right: 20rpx;
	}

	image {
		width: 50rpx;
	}

	.service {
		display: flex;
		flex-flow: column nowrap;
		justify-content: center;
		align-items: flex-start;
	}

	.service text:first-child {
		font-size: 1rem;
	}

	.service text:last-child {
		color: red;
		font-weight: bold;
	}

	#status {
		flex: 2 1 auto;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		font-size: 0.9rem;
		color: #999999;
	}

	.btnGroup {
		display: flex;
		flex-flow: row nowrap;
		justify-content: flex-end;
		font-size: 0.9rem;
	}

	.btnGroup navigator {
		margin-left: 20rpx;
		width: fit-content
	}

	.btn {
		border: 1rpx solid #007AFF;
		border-radius: 10rpx;
		box-sizing: border-box;
		width: 165rpx;
		text-align: center;
		color: #406BDB;
		height: 50rpx;
		line-height: 50rpx;
	}
</style>
